<template>
  <div style="height: 100%">
    <fc-designer ref="designer" :config="config" @save="handleSave" />
    <layoutModelDialog ref="layoutModelDialog"></layoutModelDialog>
  </div>
</template>
  <script>
import layoutModelDialog from "./designerDialog.vue";
import { buttonRule } from "@/extends/MyButton/index.js";
import { titleRule } from "@/extends/Title/index.js";
import { materialScanRule } from "@/extends/MaterialScan/index.js";
import { FormilyRule } from "@/extends/Formily/index.js";
import { EvTableRule } from "@/extends/DeEvTable/index.js";
import { FormilyMobileRule } from "@/extends/FormilyMobile/index.js";

export default {
  name: "EvDesigner",
  components: {
    layoutModelDialog,
  },
  data() {
    return {
      config: {
        // 显示保存按钮
        showSaveBtn: true,
        //控制字段ID输入框能否输入
        fieldReadonly: false,
      },
      layoutForm: {},
    };
  },
  mounted() {},
  methods: {
    openDesigner(row) {
      if (row) {
        this.layoutForm = row;
        this.initDesigner();
        const optionsJson = row.formData;
        const ruleJson = row.jsonData;
        this.$refs.designer.setOptions(optionsJson);
        this.$refs.designer.setRule(ruleJson);
      } else {
        this.layoutForm = {};
        this.initDesigner();
      }
    },
    initDesigner() {
      // 添加业务组件分组
      this.$refs.designer.addMenu({
        name: "shop",
        title: "业务组件",
        list: [],
      });
      this.$refs.designer.addComponent([
        buttonRule,
        titleRule,
        materialScanRule,
        FormilyRule,
        EvTableRule,
        FormilyMobileRule,
      ]);
    },
    //回显表单
    echoDisplay(id) {
      this.$server()
        .getObjectById("function-quality", "JsonFormData", id)
        .then((result) => {
          const optionsJson = result.formData;
          const ruleJson = result.jsonData;
          this.layoutForm = result;
          this.$refs.designer.setOptions(optionsJson);
          this.$refs.designer.setRule(ruleJson);
        })
        .catch((response) => {
          this.layoutForm = {};
          this.$message.error(response.data.message);
        });
    },
    handleSave() {
      // 处理表单保存逻辑
      if (this.layoutForm.id) {
        this.editLayoutModel();
      } else {
        const layoutForm = {
          name: "",
          code: "",
          formData: this.$refs.designer.getOptionsJson(),
          jsonData: this.$refs.designer.getJson(),
        };
        this.$refs.layoutModelDialog.open(layoutForm);
      }
    },
    // 编辑布局模型
    editLayoutModel() {
      this.layoutForm.formData = this.$refs.designer.getOptionsJson();
      this.layoutForm.jsonData = this.$refs.designer.getJson();
      this.$server()
        .updateFull("function-quality", "JsonFormData", this.layoutForm)
        .then(() => {
          this.$message.success("编辑成功");
        })
        .catch((response) => {
          this.$message.error(response.data.message);
        });
    },
  },
};
</script>
  <style scoped>
</style>